<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 100px;
            background: #000;
            position: absolute;
        }

        .box p {
            color: #fff;
        }

        .bool {
            display: inline-block;
        }

        .box button {
            border: 0;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="bool">false</p> <a href="#" class="aaa">点击回放</a>
        <p class="p1">x:0</p>
        <p class="p2">y:0</p>
    </div>


    <script>
        window.onload = () => {
            let box = document.querySelector(".box");
            let b1 = document.querySelector(".aaa");
            let p1 = document.querySelector(".p1");
            let p2 = document.querySelector(".p2");
            let bb = [];
            box.onmousedown = function (e) {
                // bb = []
                let xx = e.offsetX;
                let yy = e.offsetY;
                window.onmousemove = function (e) {
                    // let a = setInterval(function (e) {
                    let x = e.clientX - xx;
                    let y = e.clientY - yy;
                    box.style.left = x + 'px';
                    box.style.top = y + 'px';
                    // console.log(box.offsetLeft)
                    // let x1 = document.createElement("span")
                    p1.innerHTML = "x:" + box.offsetTop + "px"
                    p2.innerHTML = "y:" + box.offsetLeft + "px"

                    bb.push({ left: box.offsetLeft, top: box.offsetTop })
                    // let a = box.offsetLeft

                }
            }
            window.onmouseup = function () {
                window.onmousemove = null;
            };
            b1.onmousedown = function (ee) {
                ee.stopPropagation()
            }

            b1.addEventListener("click", (e) => {
                e.returnValue = false;
                console.log(bb.length)
                let index = bb.length - 1
                let i = 0;
                let t1 = setInterval(() => {
                    // if (index < 0) {
                    //     clearInterval(t1);
                    //     return
                    // }

                    // box.style.left = bb[index--].left + "px"
                    // box.style.top = bb[index--].top + "px"
                    if (index < i) {
                        clearInterval(t1);
                        return
                    }

                    box.style.left = bb[i++].left + "px"
                    box.style.top = bb[i++].top + "px"
                }, 10)
            })
        }
    </script>
</body>

</html>